<script setup>
import { getShort } from '@/api/zeng'
import { ref, onMounted, nextTick } from 'vue'
// import { showToast } from 'vant'
import { useRouter } from 'vue-router'
// 获取数据
const Shortdata = ref([])
getShort().then((res) => {
  console.log('getShort', res.data.data.feeds)
  Shortdata.value = res.data.data.feeds
})

// 骨架屏
const loading1 = ref(false)
const loading = ref(false)

onMounted(() => {
  loading.value = false
})
const router = useRouter()
import { Sm_List } from '@/stores/zeng.ts'
const store = Sm_List()

// 路由跳转
const jumpdetail = (item, list) => {
  store.addItem(item, list)
  store.addItem(item, list)
  router.push({
    path: '/smdetail',
    query: {
      id: item.id,
    },
  })
}

const finished = ref(false)
const shortnum = ref(1)
const onLoad = () => {
  loading.value = true // 开始加载数据
  shortnum.value++
  console.log('shortnum', shortnum.value)

  getShort(shortnum.value).then((res) => {
    console.log('getShort222', res.data.data.feeds)

    Shortdata.value = [...Shortdata.value, ...res.data.data.feeds]
    loading.value = false
    if (shortnum.value === 28) {
      finished.value = true
    }
  })

  console.log('触底了', finished, loading)
}
onMounted(() => {
  // 使用 nextTick 确保组件渲染完成后再改变 loading 状态
  nextTick(() => {
    loading.value = false // 设置为 false，允许触发加载操作
  })
})
</script>

<template>
  <div id="main">
    <header>
      <div class="title">猫眼电影</div>
    </header>
    <main>
      <!-- 视频渲染 -->
      <van-list
        v-model:loading="loading"
        :offset="0"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div class="list" v-if="Shortdata">
          <div
            class="item"
            v-for="item in Shortdata"
            :key="item"
            @click="jumpdetail(item, Shortdata)"
          >
            <van-skeleton v-if="loading1">
              <template #template>
                <van-skeleton-image />
              </template>
            </van-skeleton>
            <template v-else>
              <van-image :src="item.video.imgUrl" width="100%" height="100%" fit="cover">
                <template v-slot:error>加载失败</template>
              </van-image>
              <div class="info">
                <div class="dsc">{{ item.title }}</div>
                <div class="user">
                  <div class="name">
                    <van-image
                      round
                      :src="item.user.avatarurl"
                      width="25rem"
                      height="25rem"
                      fit="cover"
                    >
                      <template v-slot:error>加载失败</template>
                    </van-image>
                    <span>{{ item.user.nickName }}</span>
                  </div>
                  <div class="icon">
                    <van-icon name="good-job-o" /><span>{{ item.upCount }}</span>
                  </div>
                </div>
              </div>
            </template>
          </div>
        </div>
      </van-list>
    </main>
  </div>
</template>


<style lang="less" scoped>
#main {
  margin-bottom: 50rem;
}
header {
  background-color: #fff;
  border-bottom: 1px solid #00000018;

  .title {
    background-color: #e54847;
    font-size: 18rem;
    text-align: center;
    height: rem;
    padding: 0.12rem;
    color: #fff;
    height: 50rem;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
}
main {
  .list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    .item {
      width: 49%;
      height: 300rem;
      margin-bottom: 2rem;
      position: relative;
      .info {
        width: 100%;
        box-sizing: border-box;
        position: absolute;
        color: white;
        bottom: 0rem;
        left: 0rem;
        padding: 15rem 10rem;
        .dsc {
          font-size: 15rem;
          line-height: 20rem;
          margin-bottom: 10rem;
          display: -webkit-box; /* 必须结合 -webkit-line-clamp 使用 */
          -webkit-box-orient: vertical; /* 指定伸缩盒子的排列方向为垂直 */
          -webkit-line-clamp: 2; /* 限制显示的行数为 2 行 */
          overflow: hidden; /* 隐藏溢出的内容 */
          text-overflow: ellipsis; /* 添加省略号 */
          white-space: normal; /* 必须设置为 normal，确保文本可以换行 */
        }
        .user {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .name {
            display: flex;
            align-items: center;
            font-size: 14rem;
            > span {
              margin-left: 10rem;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
        }
      }
      :deep(.van-skeleton) {
        padding: 0rem;
      }
      :deep(.van-skeleton-image) {
        width: 100%;
        height: 300rem;
      }
    }
  }
}
</style>